<template>
    <div class="reasonCode zy-content ">
        <!-- 搜索 -->
      <div class="searchBox search-box-layout">
        <Row :gutter="24">
          <Col span="4">
            <div>
              <p class="label">{{$t('原因代码')}}</p>
              <div class="ipt">
                <Input type="text" v-model="searchParams.reasonCode" :placeholder="`${$t('common.inputInfo')}`"></Input>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label hide-label">--</p>
              <div class="ipt">
                <Button class="search-btn" type="primary" @click="changeNum()" v-has="'andonReasonCodePage'">{{$t('common.Query')}}</Button>
                <Button
                    class="reset-btn"
                    @click="resetSearch()"
                    v-has="'andonReasonCodePage'"
                >{{ $t('common.reset') }}
                </Button>
              </div>
            </div>
          </Col>
        </Row>
      </div>
         <div class="list-layout mt16">
           <!-- 批量删除 批量导出  批量导入 下载模板 新增-->
           <div class="btns clear">
             <span class="title">{{ $t('common.listInformation') }}</span>
             <Button  @click="delFaultCodeShowClick" v-has="'andonReasonCodeDelete'">{{$t('common.batchDelete')}}</Button>
             <Button  @click="exportTemplateClick" v-has="'andonReasonCodeExport'">{{$t('common.batchExport')}}</Button>
             <Button  @click="createfaultCodeShowH" v-has="'andonReasonCodeAdd'">{{$t('common.New')}}</Button>
           </div>
           <!-- 表格 -->
           <div class="tableContent">
             <Table ellipsis ref="selection" stripe :columns="columns" :data="dataArr"
                    @on-selection-change="onSelectChange">
               <template slot-scope="{ row ,index}" slot="action">
                    <span class="operationBtn" @click="createfaultCodeShowH(row)" v-has="'andonReasonCodeUpdate'"><i class="iconfont zy-common-bianji"></i>{{$t('common.Edit')}}</span>
                 <span class="operationBtn" @click="delPrrShowH(row)" v-has="'andonReasonCodeDelete'"><i class="iconfont zy-common-shanchu"></i>{{$t('common.Delete')}}</span>
               </template>
             </Table>
           </div>
           <!-- 分页 -->
           <div class="pageWrap mt16">
             <pageLeftTitle :total="total" :selected="delIds.length"/>
             <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum"
                   @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
           </div>
         </div>
        <!-- 新增编辑 -->
        <Modal :mask-closable="false" v-model="create" :title="addtitle" class="modal-content-layout">
            <Form ref="form" class="formList" :model="formItem"  label-position="top" :rules="ruleValidate">
                <Row :gutter="20">
                    <Col span="24">
                        <FormItem :label="$t('原因代码')" prop="reasonCode">
                            <Input type="text" v-model="formItem.reasonCode" :placeholder="`${$t('common.inputInfo')}`"></Input>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem :label="$t('原因描述')" prop="reasonDesc">
                            <Input type="text" v-model="formItem.reasonDesc" :placeholder="`${$t('common.inputInfo')}`"></Input>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="default" @click="create = false">{{$t('common.Cancle')}}</Button>
                <Button type="primary" :loading="loading" @click="addOk('form')">{{$t('maintenance.Confirmed')}}</Button>
            </div>
        </Modal>
        <!-- 请确认是否删除弹框 -->
        <Modal :mask-closable="false" v-model="delFaultCodeShowF"    :title="$t('common.Delete')" class="modal-title-layout">
          <div class="icon red">
            <i class="iconfont zy-common-shanchu"></i>
          </div>
          <p class="title">
            <span>{{$t('common.confirmDelete')}}</span>
          </p>
            <div slot="footer">
                <Button type="default" @click="delFaultCodeShowF = false">{{$t('common.Cancle')}}</Button>
                <Button type="primary" :loading="loading" @click="deleteOk">{{$t('maintenance.Confirmed')}}</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import { searchApi, addApi, editApi, deleteApi, exportApi } from "@/api/andon/reasonCode/index.js";
import fileDownload from 'js-file-download';
export default {
    name: "reasonCode",
    components: {},
    data() {
        return {
            formItem: {},
            addtitle: "",
            allCheck: false,
            loading: false,
            create: false,
            searchParams: {},
            pageNum: 1,
            pageSize: 10,
            total: 0,
            columns: [
                {
                    key: 'selection',
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    // title: `原因代码`,
                    title: `${ this.$t('原因代码') }`,
                    key: 'reasonCode',
                    minWidth: 100,
                    align: 'center'
                },
                {
                    // title: `原因描述`,
                    title: `${ this.$t('原因描述') }`,
                    key: 'reasonDesc',
                    minWidth: 100,
                    align: 'center'
                },
                {
                     //title: '操作',
                    title: `${ this.$t('common.operation') }`,
                    slot: "action",
                    fixed: 'right',
                    width: 200,
                    align: "center"
                }
            ],
            dataArr: [],
            delFaultCodeShowF: false,//是否显示删除弹窗
            pageSizeOption: [10, 20, 30, 40],
            delIds: [],
            selection: [],
            ruleValidate: {
                reasonCode: [
                    { required: true, message: this.$t('common.inputInfo'), trigger: 'blur', }
                ],
                reasonDesc: [
                    { required: true, message: this.$t('common.inputInfo'), trigger: 'blur', }
                ],
            },
        }
    },
    mounted() {
        this.searchList();
    },
    methods: {
        resetSearch(){
            this.searchParams = {}
            this.changeNum()
        },
        //分页
        changeNum() {
            this.pageNum = 1;
            this.searchList();
        },
        changePageSize(pageSize) {
            this.pageSize = pageSize;
            this.searchList();
        },
        changePageNum(val) {
            this.pageNum = val;
            this.searchList();
        },
        //查询列表
        searchList() {
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            };
            for (let key in this.searchParams) {
                if (this.searchParams[key]) {
                    this.$set(params, key, this.searchParams[key])
                }
            }
            searchApi(params).then(res => {
                if (res.code === 200) {
                    this.dataArr = res.data.list
                    this.total = res.data.total
                } else {
                    this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                }
            })
        },
        //增加或编辑
        async createfaultCodeShowH(row) {
            this.$refs.form.resetFields();
            if (row.id) {
                this.addtitle = `${this.$t('common.Edit')}`
                this.formItem = {
                    id:row.id,
                    reasonCode:row.reasonCode,
                    reasonDesc:row.reasonDesc,
                }
            } else {
                this.addtitle = `${this.$t('common.New')}`
                this.formItem = {
                    reasonCode:'',
                    reasonDesc:'',
                };
            }
            this.create = true;
        },
        addOk(name) {
            this.$refs[name].validate((valid) => {
                if (!valid) {
                    return
                } else {
                    this.loading = true;
                    if (this.formItem.id) {
                        editApi(this.formItem).then(res => {
                            this.loading = false;
                            if (res.code === 200) {
                                this.changeNum();
                                this.$Message.success(res.msg);
                                this.create = false;
                            } else {
                                this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                            }
                        })
                    } else {
                        addApi(this.formItem).then(res => {
                            this.loading = false;
                            if (res.code === 200) {
                                this.changeNum();
                                this.$Message.success(res.msg);
                                this.create = false;
                            } else {
                                this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                            }
                        })
                    }
                }
            })


        },
        //勾选列表
        onSelectChange(selection) {
            let myArray = [];
            selection.map((item, index) => {
                myArray.push(item.id);
            });
            this.delIds = myArray;
            if (selection.length > 0) {
                this.allCheck = true;
            } else {
                this.allCheck = false;
            }
        },
        //批量删除
        delFaultCodeShowClick() {
               if (this.delIds.length == 0) {
                this.$Message.warning({
                    content:`${ this.$t('common.deleteItems') }`,
                    duration: 6,
                    closable: true,
                });
                return;
            } else {
            this.delFaultCodeShowF = true;
            }
        },
        //删除
        delPrrShowH(row) {
            //点击展示提示删除弹窗
            this.delFaultCodeShowF = true;
            this.delIds = [];
            this.delIds.push(row.id);
        },
        deleteOk() {
            this.loading = true;
            let params = { ids: this.delIds }
            deleteApi(params).then(res => {
                this.loading = false;
                if (res.code === 200) {
                    this.changeNum();
                    this.$Message.success(res.msg);
                    this.allCheck = false;
                    this.delFaultCodeShowF = false;
                    this.delIds = [];
                } else {
                    this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                }
            })
        },
        //导出
        exportTemplateClick() {
            let params = {};
            for (let key in this.searchParams) {
                if (this.searchParams[key]) {
                    this.$set(params, key, this.searchParams[key])
                }
            }
            const filName = this.$t('原因代码')
            exportApi(params).then(res => {
                fileDownload(res, filName + '.xlsx')
            })
        }
    }
}
</script>


